<template>
	<view class="hot-container">
		<view>{{ msg }}</view>
		<image class="logo" src="@/static/images/logo.png" mode="aspectFit" />

		<view class="search-box">
			<my-search></my-search>
		</view>
		<view>
			<my-tabs :tabData="tabData" @tabClick="onTabClick" :defaultIndex="defaultIndex"></my-tabs>
		</view>
		<swiper class="swiper" :current="defaultIndex" style="height:1000px;">

			<swiper-item class="swiper-item" v-for="(tabItem, tabIndex) in tabData" :key="tabIndex">
				<view>{{ tabIndex }}</view>
				<view>
					<hot-list-item v-for="(item, index) in listData[defaultIndex]" :data="item" :ranking="index + 1">
					</hot-list-item>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
import { getHotTabs, getHotListFromTabType } from "api/hot";
import { mapState } from "vuex";
export default {
	data() {
		return {
			tabData: [],
			defaultIndex: 0,
			listData: [],
			isLogin: false,
		};
	},
	created() {
		this.loadHotTabs()
	},
	methods: {
		async loadHotTabs() {
			let { data: res } = await getHotTabs()
			// console.log('hot-getHotTabs', res);
			this.tabData = res.list
			console.log(this.defaultIndex);

			this.loadHotListFromTabType(this.defaultIndex)
		},
		async loadHotListFromTabType(val) {
			if (!this.listData[this.defaultIndex]) {
				this.isLogin = true
				const { data: res } = await getHotListFromTabType(val)
				console.log('hot-getHotListFromTabType', res.list);
				this.listData[this.defaultIndex] = res.list
				this.isLogin = false
			}
		},
		onTabClick(val) {
			this.defaultIndex = val

			this.loadHotListFromTabType(this.defaultIndex)
		}
	},
	computed: {
		...mapState('search', ["msg"]),
	},
}
</script>
  
<style lang="scss" scoped>
.hot-container {
	background: $uni-bg-color;

	.logo {
		width: 100%;
		height: 80px;
	}

	.search-box {
		padding: 0 16px;
		margin-bottom: $uni-spacing-col-base;
	}

}
</style>
  